<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>每日竞猜</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			font-size: 24px;
		}
		.wrap{
			width: 100%;
			height: 100%;
			background: url(/imgs/guess_back.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
		}
		.guess_top{
			width: 90%;
			margin: 30px 0;
		}
		.btn-wrap{
			display: flex;
			margin-bottom: 20px;
		}
		.btn{
			flex: 0 0 50%;
			text-align: center;
		}
		.btn-img{
			width: 80%;
		}
		.table-top{
			display: flex;
		}
		.item{
			flex: 0 0 25%;
			text-align: center;
		}
		.table-wrap{
			border: 1px solid #000000;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.3);
			width: 90%;
			margin: 0 auto;
			font-size: 1rem;
			padding-bottom: 10px;
		}
		.table-top{
			padding: 10px;
			font-size: 0.9rem;
		}
		.table-con-wrap{
			display: flex;
			align-items: center;
			border-top: 1px solid #FFFFFF;
		}
		.con-item{
			padding: 6px 0;
		}
		.con-item div{
			margin: 2px 0;
		}
		.red{
			color: #CF2029;
		}
		.victory{
			color: #FFFB00;
		}
		.scroll-wrap-1{
			overflow-y: auto;
		}
		.scroll-wrap-2{
			overflow-y: auto;
		}
		.vs-wrap{
			background: url(/imgs/vsLine.png) no-repeat;
			background-size: 100% auto;
			background-position: center;
			width: 96%;
			height: 60px;
			margin: 0 auto;
			position: relative;
		}
		.circle-wrap{
			background-color: #FFFFFF;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			text-align: center;
			overflow: hidden;
		}
		.circle-wrap-1{
			left: 15px;
		}
		.circle-wrap-2{
			right: 15px;
		}
		.country-img{
			width: 80%;
			margin-top: 4px;
		}
		.country-name{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			text-align: center;
			font-size: 0.8rem;
			color: #FFFFFF;
		}
		.country-name-1{
			left: 58px;
		}
		.country-name-2{
			right: 58px;
		}
		.big-wrap{
			position: relative;
		}
		#view1{
			visibility: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		#view2{
			visibility: visible;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.vs-btn-wrap{
			display: flex;
			align-items: center;
			width: 90%;
			margin: 3px auto;
			height: 60px;
			line-height: 60px;
		}
		.caiBtn{
			flex: auto;
			margin: 0 5px;
		}
		.caiBtn img{
			width: 100%;
		}
		.cai-all{
			display: flex;	
		}
		.cai-item{
			flex: auto;
			font-size: 0.9rem;
			color: white;
			margin-bottom: 10px;
		}
	</style>
	<body>
		<div class="wrap">
			<img class="guess_top" src="/imgs/guess_top.png"/>
			<div class="btn-wrap">
				<div class="btn" data-active = '0' data-viewId = '1'><img class="btn-img" id="zjqk" src="/imgs/history_btn_n.png"/></div>
				<div class="btn" data-active = '1' data-viewId = '2'><img class="btn-img" src="/imgs/tody_btn_y.png"/></div>
			</div>
			<div class="big-wrap">
				<div id="view1">
					<div class="cai-all">
						<div class="cai-item">昨日竞猜总人数<span>302</span></div>
						<div class="cai-item">中奖人数<span>85</span></div>
					</div>
					<div class="table-wrap">
						<div class="table-top">
							<div class="item">比赛时间</div>
							<div class="item">参赛国家</div>
							<div class="item">竞猜国家</div>
							<div class="item">中奖情况</div>
						</div>
						<div class="scroll-wrap-1">
							@foreach($finish as $fin)
								<div class="table-con-wrap">
									<div class="item con-item">
										<div>{{date('Y-m-d', $fin->match_time)}}</div>
										<div>{{date('H:i', $fin->match_time)}}</div>
									</div>
									<div class="item con-item">
										<div class="victory">{{$fin->home_name}}</div>
										<div>VS</div>
										<div>{{$fin->away_name}}</div>
									</div>
									<div class="item con-item">
										@if(!$fin->isGuess($user))
											<div class="red">未参与</div>
										@else
											<div class="victory">@if($fin->equalGuess($user) == 1) {{$fin->home_name}}胜 @else {{$fin->away_name}}胜 @endif</div>
										@endif	
									</div>
									<div class="item con-item">
										@if(!$fin->isGuess($user))
											<div class="red">未参与</div>
										@else
											@if($fin->equalGuess($user) == $fin->match_result) <div class="victory">中奖</div> @else <div class="red">未猜中</div> @endif
										@endif	
									</div>
								</div>
							@endforeach
						</div>
					</div>
				</div>
				<div id="view2">
					<div class="scroll-wrap-2">
					@foreach($games as $game)
						<div class="vs-item" data-id="{{$game->id}}">
							<div class="vs-wrap">
								<div class="circle-wrap circle-wrap-1">
									<img class="country-img" src="/imgs/countryCircle/{{$game->home}}.png"/>
								</div>
								<div class="country-name country-name-1">{{$game->home_name}}</div>
								<div class="circle-wrap circle-wrap-2">
									<img class="country-img" src="/imgs/countryCircle/{{$game->away}}.png"/>
								</div>
								<div class="country-name country-name-2">{{$game->away_name}}</div>
							</div>
							@if(!$game->isGuess($user))
								<div class="vs-btn-wrap" data-isChoose='0'>
									<div class="caiBtn" data-cai="1"><img src="/imgs/caiTaSheng_y.png"/></div>
									<div class="caiBtn" data-cai="3"><img src="/imgs/caiPinJu_y.png"/></div>
									<div class="caiBtn" data-cai="2"><img src="/imgs/caiTaSheng_y.png"/></div>
								</div>
							@else
								<div class="vs-btn-wrap" data-isChoose='1'>
									<div class="caiBtn" data-cai="1">
										@if($game->equalGuess($user) == 1)
											<img src="/imgs/yiXuanZe.png"/>
										@else
											<img src="/imgs/caiTaSheng_y.png"/>
										@endif
									</div>
									<div class="caiBtn" data-cai="3">
										@if($game->equalGuess($user) == 3)
											<img src="/imgs/yiXuanZe.png"/>
										@else
											<img src="/imgs/caiPinJu_y.png"/>
										@endif	
									</div>
									<div class="caiBtn" data-cai="2">
										@if($game->equalGuess($user) == 2)
											<img src="/imgs/yiXuanZe.png"/>
										@else
											<img src="/imgs/caiTaSheng_y.png"/>
										@endif	
									</div>
								</div>
							@endif
						</div>
					@endforeach
					</div>
				</div>
			</div>
		</div>
		
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script src="{{asset('/js/layer_mobile/layer.js')}}" type="text/javascript" charset="utf-8"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		wx.config(<?php echo $js->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
		wx.ready(function(){
			wx.onMenuShareAppMessage({
			    title: '世界杯每日竞猜', // 分享标题
			    desc: '乐游手游邀您一起参与世界杯比赛竞猜，赢百万银票奖励!', // 分享描述
			    link: '{{$url}}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: 'http://user.leyougame.cc/image/wc_dayguess.jpg', // 分享图标
			    type: 'link', // 分享类型,music、video或link，不填默认为link
			    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    success: function () {
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () {
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareTimeline({
			    title: '世界杯每日竞猜', // 分享标题
			    link: '{{$url}}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: 'http://user.leyougame.cc/image/wc_dayguess.jpg', // 分享图标
			    success: function () {
			    // 用户点击了分享后执行的回调函数
				},
			});
	   	});
	   	wx.error(function(res){

		});

	</script>
	<script type="text/javascript">
		jQuery(function() {

			$(document).on('click', 'img', e => { 
			e.preventDefault(); 
			})
			// 设置背景图尺寸
			setBackGround()
			// 设置滚动区域
			setScrollHeight()
			// 设置tab按钮点击状态
			$('.btn').on('touchstart', function() {
				var active = Number(($(this)).attr('data-active'))
				console.log(active)
				if (!active) {
					// 按钮样式
					var img = $(this).find('.btn-img')
					var otherImg = $(this).siblings().find('.btn-img')
					var newStr = img.attr('src').replace('_n.png', '_y.png')
					img.attr('src', newStr)
					var newStr2 = otherImg.attr('src').replace('_y.png', '_n.png')
					otherImg.attr('src', newStr2)
					$(this).attr('data-active', '1')
					$(this).siblings().attr('data-active', '0')
					// 切换显示界面
					var viewId = Number(($(this)).attr('data-viewId'))
					if (viewId === 1) {
						// 显示中奖情况
						$('#view1').css('visibility', 'visible')
						$('#view2').css('visibility', 'hidden')
					} else if (viewId === 2) {
						// 显示今日竞猜
						$('#view2').css('visibility', 'visible')
						$('#view1').css('visibility', 'hidden')
					}
				}
			})
			// 点击猜按钮
			$('.caiBtn').on('click', function() {
				// 是否已经选择
				var isChoose = Number($(this).parent().attr('data-isChoose'))
				if (isChoose) {
					layer.open({
					    content: '本场次已选择'
					    ,skin: 'msg'
					    ,time: 1
					});
				} else {
					console.log('还没有选过')
					var itemId = $(this).parent().parent().attr('data-id')
					console.log('点击的是id为 ' + itemId + ' 的场次')
					var caiId = $(this).attr('data-cai')
					console.log('点击猜的国家id为 ' + caiId)
					//询问框
					var thisDom = $(this)
					layer.open({
						content: '确定选择吗？'
						,btn: ['确定', '取消']
						,no: function(index) {
					    		console.log('用户点击了取消')
					      	layer.close(index)
						}
					    ,yes: function(index){
					    		console.log('用户点击了确定')
			                $.ajax({
			                    type: "POST",
			                    dataType: "json",
			                    url: '/mobile/worldcup/day_choose/{{$user->id}}',
			                    data: {
			                    	match_id: itemId,
			                    	result: caiId,
			                        _token: "{{ csrf_token() }}"
			                    },
			                    success: function (data) {
			                    	if (data.flag) {
								      	layer.close(index)
								      	// 设置状态为已经选过了
								      	thisDom.parent().attr('data-isChoose', '1')
								      	// 更换图片为已经猜完的图片
								      	var oldStr = thisDom.find('img').attr('src')
								      	var newStr = ''
								      	if (oldStr.indexOf("caiTaSheng_y.png") !== -1) {
								      		newStr = oldStr.replace('caiTaSheng_y.png', 'yiXuanZe.png')
								      	} else {
								      		newStr = oldStr.replace('caiPinJu_y.png', 'yiXuanZe.png')
								      	}
								      	thisDom.find('img').attr('src', newStr)
			                    	}
			                    }
			                }); 	
					    }
					});
				}
			})
		})
		
		// 设置背景图尺寸
		function setBackGround() {
			$('.wrap').height($(window).height())
			$('.wrap').width($(window).width())
		}
		// 设置滚动区域
		function setScrollHeight() {
			// 中奖历史页面滚动高度
			var myoffset = $('.scroll-wrap-1').offset()
			var myTop = Math.floor(myoffset.top)
			var scrollH = $(window).height() - myTop - 40
			$('.scroll-wrap-1').height(scrollH)
			// 今日竞猜页面滚动高度
			var myoffset2 = $('.scroll-wrap-2').offset()
			var myTop2 = Math.floor(myoffset2.top)
			var scrollH2 = $(window).height() - myTop2 - 40
			$('.scroll-wrap-2').height(scrollH2)
		}
		
	</script>
	</body>
</html>
